<template>
  <div class="content-quarter">
    <div class="quarter-btn">
      <template v-if="stepActiveName == 1">
        <el-button size="small" class="m-r-20" type="primary" @click="commitBoard(8)">暂 存</el-button>
        <el-button size="small" type="primary" @click="commitBoard(9)">下一步</el-button>
      </template>
      <template v-if="stepActiveName == 2">
        <el-button size="small" class="m-r-20" type="primary" @click="lastStep(0)">上一步</el-button>
        <el-button size="small" type="primary" @click="lastStep(1)">提 交</el-button>
      </template>
    </div>
    <div class="quarter-con">
      <el-steps :active="stepActiveName" align-center class="step_board">
        <el-step title="季度总结"></el-step>
        <el-step title="考核登记表"></el-step>
        <el-step title="提交"></el-step>
      </el-steps>

      <SelfAssOne
        :optionData="optionData"
        ref="selfOne"
        class="board_ass"
        @subMitData="subMitData"
        v-if="stepActiveName == 1 && optionData && optionData.recordId" />
      <QuaterSummary
        ref="quaterSum"
        class="board_summary"
        :summaryData="summaryData"
        @subMitTwo="subMitTwo"
        :userType="userType"
        v-if="stepActiveName == 2" />
    </div>
  </div>
</template>

<script>
import QuaterSummary from '../detail/QuaterSummary'
import SelfAssOne from './components/SelfAssOne'
import { saveForm, addRecordNoteSeason, getFormByNoteId } from '@apis/board.js'
export default {
  name: 'WriteContentQuarter',
  components: { QuaterSummary, SelfAssOne },
  props: {
    info: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      title: '',
      // 路由传参
      routerQuery: {},
      showTabs: false,
      summaryData: {},
      showSumTips: true,
      optionData: {},
      workCon: '',
      eduCon: '',
      rpCon: '',
      confirmText: [],
      // 当前步骤
      stepActiveName: 1,
      userType: '1-1', // 用户类型 1-1非领导成员公务员 1-2领导成员公务员  1-3曾经担任领导职务人员和享受非领导职务待遇人员"
    }
  },
  watch: {
    info: {
      handler(news) {
        if (news.recordId) {
          this.initData()
        }
      },
    },
  },
  computed: {},
  created() {
    this.routerQuery = Object.assign({}, this.$route.query)
    this.getFormByNoteId()
  },
  mounted() {
    if (this.info.recordId) {
      this.initData()
    }
  },
  methods: {
    initData() {
      const data = this.info
      this.optionData = data
    },
    getFormByNoteId() {
      getFormByNoteId({
        id: this.$route.query.id,
      }).then(res => {
        const data = res.data
        this.summaryData = {}
        if (data && Object.keys(data).length > 0) {
          this.showTabs = true
          this.summaryData = data
          this.userType = '1-' + data.userCategory
        }
      })
    },
    commitBoard(saveStatus) {
      this.$refs.selfOne.commitBoard(saveStatus)
    },
    subMitData(workCon, saveStatus, confirmText, eduCon, rpCon) {
      this.optionData.workCon = workCon
      this.workCon = workCon
      this.eduCon = eduCon
      this.rpCon = rpCon
      this.confirmText = confirmText
      this.saveSum(saveStatus)
    },
    lastStep(saveStatus) {
      if (saveStatus === 1) {
        const h = this.$createElement
        const extData = this.$refs.quaterSum.extData
        const emitData = this.$refs.quaterSum.emitData
        console.log('emitData :>> ', emitData)
        if (extData.userGender.trim().length === 0) {
          return this.$message.warning('请完善性别后再提交')
        }
        if (extData.bornTime.trim().length === 0) {
          return this.$message.warning('请完善出生年月后再提交')
        }
        if (extData.userPost.trim().length === 0) {
          return this.$message.warning('请完善部门及职务后再提交')
        }
        if (extData.postTime.trim().length === 0) {
          return this.$message.warning('请完善任现职时间后再提交')
        }
        if (extData.userPostDuty.trim().length === 0) {
          return this.$message.warning('请完善从事或分管工作后再提交')
        }
        if (extData.quartTask.trim().length === 0) {
          return this.$message.warning('请完善本季度工作目标任务后再提交')
        }
        if (extData.quartContent.trim().length === 0) {
          return this.$message.warning('请完善个人小结后再提交')
        }
        this.$confirm('提示', {
          title: '提示',
          message: h('div', { class: 'content-title' }, '提交后不能更改，请确定是否提交?'),
          customClass: 'messageBox-quater', // 在这里在这里
          showCancelButton: true,
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(() => {
            this.$nextTick(() => {
              this.$refs.quaterSum.addSum(saveStatus)
            })
          })
          .catch(() => {})
      } else {
        this.$nextTick(() => {
          this.$refs.quaterSum.addSum(saveStatus)
        })
      }
    },

    // 保存
    subMitTwo(workCon, saveStatus) {
      addRecordNoteSeason({
        ...this.optionData,
        saveStatus: saveStatus,
        workCon: workCon,
      }).then(res => {
        if (res.code === 0) {
          if (saveStatus === 0) {
            this.stepActiveName = 1
            this.getFormByNoteId()
            this.$emit('updateDoc')
          } else {
            this.$message({
              message: '提交成功',
              type: 'success',
            })
            setTimeout(() => {
              this.$router.go(-1)
            }, 500)
          }
        }
      })
    },

    saveSum(saveStatus) {
      const saveOne = saveStatus === 8 || saveStatus === 9 || saveStatus === 10 ? 0 : saveStatus
      const data1 = { saveStatus: saveOne }
      const data2 = { quartContent: this.workCon }
      const formData = Object.assign(this.summaryData, data1, data2)
      saveForm({
        ...formData,
      }).then(res => {
        if (res.code === 0) {
          if (saveStatus === 8) {
            this.$message({
              message: '暂存成功',
              type: 'success',
            })
          } else if (saveStatus === 9) {
            this.editShow = false
            setTimeout(() => {
              this.editShow = true
            }, 100)
            this.stepActiveName = 2
            this.$message({
              message: '保存成功',
              type: 'success',
            })
          }
          this.getFormByNoteId()
          this.$emit('updateDoc')
        }
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.content-quarter {
  width: 100%;
  height: 100%;
  .quarter-btn {
    position: absolute;
    right: 0;
    top: -60px;
  }
  .quarter-con {
    padding: 10px 20px;
    height: 100%;
    // overflow-y: auto;
    .step_board {
      padding-top: 10px;
      height: 80px;
      background-color: #fff;
      /deep/ .el-step__icon {
        width: 36px;
        height: 36px;
      }
      /deep/ .el-step__line {
        top: 17px;
      }
      /deep/.el-step__title {
        line-height: 20px;
        margin-top: 5px;
      }
    }
    .board_ass,
    .board_summary {
      width: 100%;
      height: calc(100% - 90px);
    }
    .title_oper {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      .oper_box {
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        .m-r-20 {
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
